<template>
	<view class="content">
		<view class="flex">
			<image src="/static/logo.png" class="logo"></image>
			<view class="text">趣味发布</view>
		</view>
		<view class="pyp-box">碰一碰 客源滚滚来！</view>
		<view class="biao">发视频种草</view>
		
		<view style="width: 100%;display: flex;">
			<view class="flex" @click="publish('tiktok')">
				<image src="/static/tiktok-icon.png" class="logo2"></image>
				<view class="text2" style="color: #c2c1c7;margin-left: 10rpx;">
					<view style="line-height: 45rpx;">抖音视频</view>
					<view style="color: #887d7c;font-size: 20rpx;">一键拉起、智能文案</view>
				</view>
			</view>
			<view class="flex" @click="publish('redbook')">
				<image src="/static/redbook-icon.png" class="logo2" style="margin-left: 20rpx;"></image>
				<view class="text2" style="color: #c2c1c7;margin-left: 10rpx;">
					<view style="line-height: 45rpx;">小红书</view>
					<view style="color: #887d7c;font-size: 20rpx;">快速发布笔记</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;display: flex;">
			<view class="flex" @click="publish('wechat_video')">
				<image src="/static/video-icon.png" class="logo2"></image>
				<view class="text2" style="color: #c2c1c7;margin-left: 10rpx;">
					<view style="line-height: 45rpx;">发视频号</view>
					<view style="color: #887d7c;font-size: 20rpx;">发布到微信视频号</view>
				</view>
			</view>
			<view class="flex" @click="publish('wechat')">
				<image src="/static/moments-icon.png" class="logo2" style="margin-left: 20rpx;"></image>
				<view class="text2" style="color: #c2c1c7;margin-left: 10rpx;">
					<view style="line-height: 45rpx;">微信朋友圈</view>
					<view style="color: #887d7c;font-size: 20rpx;">微信朋友圈视频+文案</view>
				</view>
			</view>
		</view>
		<view class="flex" @click="publish('ks')">
			<image src="/static/ks-icon.png" class="logo2"></image>
			<view class="text2" style="color: #c2c1c7;margin-left: 10rpx;">
				<view style="line-height: 45rpx;">快手视频</view>
				<view style="color: #887d7c;font-size: 20rpx;">转发至快手短视频</view>
			</view>
		</view>
		
		<view class="biao" >商家团购</view>
		<view class="group" >
			<view  class="flex">
				<image @click="group" src="/static/tiktok-manage-icon.png" class="logo3"></image>
				<view @click="group" class="text2" style="color: #c2c1c7;margin-left: 5rpx;margin-top: 30rpx;">
					<view style="line-height: 25rpx;">商家团购</view>
					<view style="color: #83868e;font-size: 22rpx;line-height: 55rpx;">开启美好生活</view>
				</view>
						
				<image src="/static/meituan-icon.png" class="logo3" @click="meituan_group"></image>
				<view class="text2" style="color: #c2c1c7;margin-left: 5rpx;margin-top: 30rpx;" @click="meituan_group">
					<view style="line-height: 25rpx;">美团团购</view>
					<view style="color: #83868e;font-size: 22rpx;line-height: 55rpx;">美团，送啥都快</view>
				</view>
			</view>
			
			<view  class="flex" style="margin-top: 30rpx;">
				<image @click="dz_group" src="/static/evaluate-icon.png" class="logo3"></image>
				<view @click="dz_group" class="text2" style="color: #c2c1c7;margin-left: 5rpx;margin-top: 30rpx;">
					<view style="line-height: 25rpx;">大众点评</view>
					<view style="color: #83868e;font-size: 22rpx;line-height: 55rpx;">美食界的扛把子</view>
				</view>
			
				<image src="/static/ks.png" class="logo3" @click="ks_group"></image>
				<view class="text2" style="color: #c2c1c7;margin-left: 5rpx;margin-top: 30rpx;" @click="ks_group">
					<view style="line-height: 25rpx;">快手团购</view>
					<view style="color: #83868e;font-size: 22rpx;line-height: 55rpx;">你要的都在这里</view>
				</view>
			</view>
		</view>
		
		<view class="biao" >打卡点评</view>
		<view  class="flex">
			<view class="dianping" @click="dianping('tiktok')">
				<image src="/static/tiktok-only-icon.png" class="logo4"></image>
				<view class="text3">
				点评&收藏
				</view>
			</view>
			<view class="dianping" @click="dianping('gaode')">
				<image src="/static/amap-icon.png" class="logo4"></image>
				<view class="text3">
				点评&收藏
				</view>
			</view>
			<view class="dianping" @click="dianping('dz')">
				<image src="/static/video-icon.png" class="logo4"></image>
				<view class="text3">
				点评&收藏
				</view>
			</view>
		</view>
		
		<!-- 弹出层内容 -->
		<view class="popup-container" :class="{ 'popup-show': showPopup2 }">
		  <!-- 标题和关闭按钮 -->
			<view class="popup-header"  style="float: right;color: #404040;font-size: 22rpx;">
				<text class="popup-close" @click="closePopup2">×</text>
			</view>
			<view style="clear: both;"></view>

			<view class="form-item">
				<text class="form-label">文案</text>
				<textarea 
				  style="color: #000;"
				  v-model="desc" 
				  class="form-input" 
				  placeholder="请输入文案"
				  @blur="validateField('desc')"
				></textarea>
			</view>
			
			<!-- 底部按钮 -->
			<view class="popup-footer">
				<button class="cancel-btn" @click="closePopup2">取消</button>
				<button class="submit-btn" @click="submitForm2">
					<text v-if="brand=='tiktok'">抖音点评</text>
					<text v-if="brand=='gaode'">高德点评</text>
					<text v-if="brand=='dz'">大众点评</text>
				</button>
			</view>
		</view>
		
		<!-- 弹出层内容 -->
		<view class="popup-container" :class="{ 'popup-show': showPopup }">
		  <!-- 标题和关闭按钮 -->
		  <view class="popup-header"  style="float: right;color: #404040;font-size: 22rpx;">
			  
            视频开关：<switch type="switch" :class="isVibrating ? 'blue checked' : 'blue'" color="#007AFF" 
			:checked="isVibrating" @change="toggleVibration" style="margin-right: 100rpx;" />
			
			<text class="popup-close" @click="closePopup">×</text>
		  </view>
		  <view style="clear: both;"></view>

		  <!-- 表单区域 -->
		  <view class="popup-form">
			<scroll-view scroll-y="true" class="form-scroll">
			  <!-- 输入框 -->
			  <view class="form-item">
				<text class="form-label">标题</text>
				<input style="color: #000;"
				  v-model="formData.title" 
				  class="form-input" 
				  placeholder="请输入标题"
				  @blur="validateField('title')"
				/>
				<text class="error-msg" v-if="errors.title">{{ errors.title }}</text>
			  </view>
			  
			  <view class="form-item">
				<text class="form-label">文案</text>
				<textarea 
				  style="color: #000;"
				  v-model="formData.desc" 
				  class="form-input" 
				  placeholder="请输入文案"
				  @blur="validateField('desc')"
				></textarea>
				<text class="error-msg" v-if="errors.desc">{{ errors.desc }}</text>
			  </view>
			  
			  <!-- 图片上传 -->
			  <view class="form-item" v-if="isVibrating==false">
				<text class="form-label">上传图片 <text class="form-tip" style="font-size:22rpx;color: #000;padding-bottom: 8rpx;">(最多3张，每张不超过5MB)</text></text>
				
				<view class="upload-container">
				  <!-- 已上传图片预览 -->
				  <view class="image-preview" v-for="(image, index) in formData.images" :key="'img-'+index">
					<image class="preview-image" :src="image" mode="aspectFill"></image>
					<view class="delete-btn" @click="deleteImage(index)">×</view>
				  </view>
				  
				  <!-- 上传按钮 -->
				  <view class="upload-btn" @click="chooseImage" v-if="formData.images.length < 3">
					<text>+</text>
					<text class="upload-text">添加图片</text>
				  </view>
				</view>
				<text class="error-msg" v-if="errors.images">{{ errors.images }}</text>
			  </view>
			  
			  <!-- 视频上传 -->
			  <view class="form-item" v-if="isVibrating==true">
				<text class="form-label">上传视频 <text class="form-tip" style="font-size:22rpx;color: #000;padding-bottom: 8rpx;">(最多1个，不超过50MB)</text></text>
				
				<view class="video-upload-container">
				  <!-- 已上传视频预览 -->
				  <view class="video-preview" v-if="formData.video" style="position: relative;">
					<video style="width: 300rpx;height: 300rpx;"
					  class="preview-video"
					  :src="formData.video"
					  controls
					></video>
					<view class="delete-btn" @click="deleteVideo" style="position: absolute;top: -10rpx;left: 320rpx;">×</view>
				  </view>
				  
				  <!-- 上传按钮 -->
				  <view class="upload-btn" @click="chooseVideo" v-if="!formData.video">
					<text>+</text>
					<text class="upload-text">添加视频</text>
				  </view>
				</view>
				<text class="error-msg" v-if="errors.video">{{ errors.video }}</text>
			  </view>
			</scroll-view>
		  </view>
		  
		  <!-- 底部按钮 -->
		  <view class="popup-footer">
			<button class="cancel-btn" @click="closePopup">取消</button>
			<button class="submit-btn" @click="submitForm">
				<text v-if="type=='tiktok'">发布到抖音</text>
				<text v-if="type=='wechat'">发布到微信朋友圈</text>
				<text v-if="type=='wechat_video'">发布到微信视频号</text>
				<text v-if="type=='redbook'">发布到微信视频号</text>
				<text v-if="type=='ks'">发布到快手</text>
				
			</button>
		  </view>
		</view>
		
		
		<view class="zhezhao" v-if="this.showPopup==true||this.showPopup2==true" @click="closeP"></view>
		
		<view style="height: 200px;"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup:false,
				isVibrating:true,
				formData: {
					title: '',
					desc: '',
					images: [],
					video: '',
				},
				errors: {
					title: '',
					desc: '',
					images: '',
					video: ''
				},
				type:'tiktok',
				
				brand:'tiktok',
				desc:'',
				showPopup2:false,
				
			}
		},
		onLoad() {

		},
		methods: {
			closeP(){
				this.showPopup = false
				this.showPopup2 = false
			},
			toggleVibration(e) {
				this.isVibrating = e.detail.value; // 当前Switch的值（true：开；false：关）
			},
			publish(type){
				this.type = type
				this.showPopup = true
			},
			closePopup(){
				this.showPopup = false
				this.resetForm()
			},
			// 重置表单
			resetForm() {
				this.formData = {
					title: '',
					desc: '',
					images: [],
					video: '',
				}
				this.errors = {
					title: '',
					desc: '',
					images: '',
					video: ''
				}
			},
			// 选择图片
			chooseImage() {
			  uni.chooseImage({
				count: 3 - this.formData.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
				  // 检查图片大小
				  const validFiles = res.tempFiles.filter(file => file.size <= 5 * 1024 * 1024)
				  if (validFiles.length < res.tempFiles.length) {
					uni.showToast({
					  title: '部分图片超过5MB限制',
					  icon: 'none'
					})
				  }
				  
				  if (validFiles.length > 0) {
					this.formData.images = [
					  ...this.formData.images,
					  ...validFiles.map(file => file.path)
					]
					this.validateField('images')
				  }
				}
			  })
			},
			// 删除图片
			deleteImage(index) {
			  this.formData.images.splice(index, 1)
			  this.validateField('images')
			},
			// 选择视频
			chooseVideo() {
			  uni.chooseVideo({
				sourceType: ['album', 'camera'],
				maxDuration: 60, // 60秒
				compressed: true,
				success: (res) => {
				  // 检查视频大小
				  if (res.size > 50 * 1024 * 1024) {
					uni.showToast({
					  title: '视频不能超过50MB',
					  icon: 'none'
					})
					return
				  }
				  
				  this.formData.video = res.tempFilePath
				  this.validateField('video')
				}
			  })
			},
			// 删除视频
			deleteVideo() {
			  this.formData.video = ''
			  this.validateField('video')
			},
			// 验证单个字段
			validateField(field) {
			  this.errors[field] = ''
			  
			  if (field === 'title') {
				if (this.formData.title=='') {
				  this.errors.title = '请输入标题'
				}
			  }
			  
			  
			  if (field === 'desc') {
				if (!this.formData.desc) {
				  this.errors.desc = '请输入文案'
				} 
			  }
			  
			  if(this.isVibrating==false){
				  if (field === 'images') {
					if (this.formData.images.length === 0) {
					  this.errors.images = '请至少上传一张图片'
					}
				  }
			  }
			  
			  
			  if(this.isVibrating==true){
				  if (field === 'video') {
					if (!this.formData.video) {
					  this.errors.video = '请上传一个视频'
					}
				  }
			  }
			},
			// 验证整个表单
			validateForm() {
			  let isValid = true
			  
			  // 验证所有字段
			  Object.keys(this.formData).forEach(field => {
				this.validateField(field)
				if (this.errors[field]) {
				  isValid = false
				}
			  })
			  
			  return isValid
			},
			// 提交表单
			submitForm() {
			  if (this.validateForm()) {
				console.log('表单数据：', this.formData)
				
				// 除微信外 都接开放平台 看看是否 直接可以跳转发布， 已知抖音和小红书可以
				if(this.type=='tiktok'){
					uni.showToast({
					  title: '提交成功',
					  icon: 'success'
					})
				}else if(this.type=='wechat'){
					this.openWechat()
				}else if(this.type=='wechat_video'){
					this.openWechat()
				}else if(this.type=='redbook'){
					window.location.href="xhsdiscover://home"
				}else if(this.type=='ks'){
					window.location.href="kwai://home"
				}
				
				this.closePopup()
			  }
			},
			openWechat() {
			  const ua = navigator.userAgent;
			  const isiOS = /iPad|iPhone|iPod/.test(ua);
			  const scheme = isiOS ? 'weixin://' : 'weixin://';
			
			  // 尝试跳转
			  window.location.href = scheme;
			  
			  // 检测是否跳转成功
			  let isJumped = false;
			  window.onblur = () => { isJumped = true; };
			  
			  setTimeout(() => {
			    if (!isJumped) {
			      uni.showModal({
			        title: '提示',
			        content: '请手动打开微信',
			        confirmText: '确定',
			        success: () => {
			          window.location.href = 'https://weixin.qq.com/';
			        }
			      });
			    }
			  }, 1000);
			},
			group(){
				//都是可以通过 复制链接得来
				window.location.href = 'snssdk1128://poi/detail/?id=6601181343588026371';
			},
			meituan_group(){
				//都是可以通过 复制链接得来
				window.location.href = 'imeituan://www.meituan.com/food/poi/detail?id=1609752862';
			},
			dz_group(){
				//都是可以通过 复制链接得来
				window.location.href = 'https://w.dianping.com/cube/evoke/dianping.html?img=730582ac&url=dianping%3A%2F%2Fmrn%3Fmrn_biz%3Ddaodianpingtai%26mrn_entry%3Ddeal-detail%26mrn_component%3DsuperSeckillDeal%26dealId%3D1224954878%26poiId%3D1835782627%26poiIdEncrypt%3DqB4r17707ba209b09ee562a437925b71650ee8e63d7690a06106e1ce2a76ee607d88922f49ead8bfb6b63467273b14a92evxu5%26scene%3DSECOND_KILL%26bizLine%3DFOOD%26source%3DcostEffective%26userId%3D1951441120%26uuid%3D0000000000000DEF85EB2C7ED4C43BA825F77FA8FFF89A171448459320471712%26sceneId%3D41128%26sceneType%3D2%26sharer_device_id%3D0000000000000DEF85EB2C7ED4C43BA825F77FA8FFF89A171448459320471712%26sharer_user_id%3D1951441120&shareid=uEg4qgg13e_1751006244344';
			},
			ks_group(){
				//快手复制链接 不成功
				uni.showToast({
					title:'暂未开放'
				})
			},
			dianping(brand){
				this.brand = brand
				this.showPopup2 = true
			},
			closePopup2(){
				this.showPopup2 = false
			},
			submitForm2(){
				//都是可以通过 复制链接得来
				if(this.brand=='tiktok'){
					window.location.href = 'snssdk1128://poi/detail/?id=6601181343588026371';
				}else if(this.brand=='gaode'){
					window.location.href = "https://surl.amap.com/iBhxbG51tgRo"
				}else if(this.brand=='dz'){
					window.location.href = 'https://w.dianping.com/cube/evoke/dianping.html?img=730582ac&url=dianping%3A%2F%2Fmrn%3Fmrn_biz%3Ddaodianpingtai%26mrn_entry%3Ddeal-detail%26mrn_component%3DsuperSeckillDeal%26dealId%3D1224954878%26poiId%3D1835782627%26poiIdEncrypt%3DqB4r17707ba209b09ee562a437925b71650ee8e63d7690a06106e1ce2a76ee607d88922f49ead8bfb6b63467273b14a92evxu5%26scene%3DSECOND_KILL%26bizLine%3DFOOD%26source%3DcostEffective%26userId%3D1951441120%26uuid%3D0000000000000DEF85EB2C7ED4C43BA825F77FA8FFF89A171448459320471712%26sceneId%3D41128%26sceneType%3D2%26sharer_device_id%3D0000000000000DEF85EB2C7ED4C43BA825F77FA8FFF89A171448459320471712%26sharer_user_id%3D1951441120&shareid=uEg4qgg13e_1751006244344';
				}
				
				this.closePopup()
			}
			
		}
	}
</script>

<style scoped>
	page{
		width: 100%;
		height: 100%;
		background-color: #000;
		color: #fff;
	}
	.zhezhao{
		width: 100%;
		height: 100%;
		background-color: #000;
		color: #fff;
		z-index: 2;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		opacity: 0.8;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.flex{
		display: flex;
	}
	.logo {
		height: 70rpx;
		width: 70rpx;
		margin: 20rpx;
		margin-left: 40rpx;
	}
	.logo2 {
		height: 80rpx;
		width: 80rpx;
		margin: 20rpx;
		margin-left: 50rpx;
	}
	.logo3{
		height: 50rpx;
		width: 50rpx;
		margin-left: 50rpx;
		margin-top: 35rpx;
		margin-right: 15rpx;
	}
	.logo4 {
		height: 80rpx;
		width: 80rpx;
		margin: auto;
		margin-top: 20rpx;
	}
	.text{
		height: 70rpx;
		width: 300rpx;
		line-height: 70rpx;
		margin: 20rpx;
	}
	.text2{
		height: 35rpx;
		width: 200rpx;
		line-height: 35rpx;
		margin: 20rpx;
	}
	.text3{
		height: 35rpx;
		width: 100%;
		line-height: 35rpx;
		font-size: 26rpx;height: 60rpx;
		margin-top: 20rpx;
		color: #83868e;
	}
	.pyp-box{
	    border-radius: .625rem;
	    background: #2c2a37;
	    font-size: 1.125rem;
	    font-weight: 700;
	    color: #fff;
		padding: 0.625rem;
		width: 85%;
		margin-left: 5%;
		text-align: center;
	}
	.group{
		border-radius: 10px;background: #2c2a37;width: 90%;margin-left: 5%;height: 240rpx;
	}
	.dianping{
		border-radius: 10px; margin-left: 4%; margin-right: 1%;background: #2c2a37; padding:20rpx;width: 22%; text-align: center;
	}
	.biao{
		font-size: 1rem;
		font-weight: 500;
		color: #e5cf9e;
		margin-left: 20rpx;
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	

	.container {
	  padding: 20px;
	}

	/* 遮罩层 */
	.popup-mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: rgba(0, 0, 0, 0.5);
	  z-index: 999;
	}

	/* 弹出层容器 */
	.popup-container {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: -100%;
	  background-color: #fff;
	  border-radius: 16px 16px 0 0;
	  padding: 20px;
	  z-index: 1000;
	  transition: all 0.3s ease;
	}

	.popup-show {
	  bottom: 0;
	  z-index: 999;
	}

	/* 头部样式 */
	.popup-header {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-bottom: 15px;
	}

	.popup-title {
	  font-size: 18px;
	  font-weight: bold;
	  color: #333;
	}

	.popup-close {
	  font-size: 24px;
	  color: #999;
	}

	/* 描述文案 */
	.popup-desc {
	  font-size: 14px;
	  color: #666;
	  margin-bottom: 20px;
	  line-height: 1.5;
	}

	/* 表单样式 */
	.form-item {
	  margin-bottom: 20px;
	}

	.form-label {
	  display: block;
	  margin-bottom: 8px;
	  font-size: 14px;
	  color: #333;
	}

	.form-input {
	  width: 90%;
	  height: 40px;
	  padding: 0 10px;
	  border: 1px solid #ddd;
	  border-radius: 4px;
	  font-size: 14px;
	}

	.error-msg {
	  display: block;
	  margin-top: 5px;
	  font-size: 12px;
	  color: #f56c6c;
	}

	/* 图片上传 */
	.upload-container {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 10px;
	}

	.image-preview {
	  position: relative;
	  width: 80px;
	  height: 80px;
	  border-radius: 4px;
	  overflow: hidden;
	}

	.preview-image {
	  width: 100%;
	  height: 100%;
	}

	.delete-btn {
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 20px;
	  height: 20px;
	  background-color: rgba(0, 0, 0, 0.5);
	  color: #fff;
	  text-align: center;
	  line-height: 20px;
	  border-radius: 0 0 0 10px;
	  font-size: 16px;
	}

	.upload-btn {
	  width: 80px;
	  height: 80px;
	  border: 1px dashed #ddd;
	  border-radius: 4px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  color: #999;
	}

	.upload-btn text:first-child {
	  font-size: 24px;
	  line-height: 1;
	}

	.upload-text {
	  font-size: 12px;
	  margin-top: 5px;
	}

	/* 底部按钮 */
	.popup-footer {
	  display: flex;
	  justify-content: space-between;
	  margin-top: 20px;
	}

	.popup-footer button {
	  flex: 1;
	  height: 44px;
	  line-height: 44px;
	  border-radius: 8px;
	  font-size: 16px;
	}

	.cancel-btn {
	  background-color: #f5f5f5;
	  color: #333;
	  margin-right: 10px;
	}

	.submit-btn {
	  background-color: #007aff;
	  color: #fff;
	  margin-left: 10px;
	}
</style>
